import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { Carousel } from 'antd';
import Banner from "../../componment/Banner"
import "../../scss/banner.scss"
<<<<<<< HEAD
import { useTranslation } from 'react-i18next';
import TitleHead from '../../component/TitleHead';
import ContentList from '../../component/ContentList';
import ContentChildren from '../../component/ContentChildren';
<<<<<<< HEAD
=======
=======
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
type Props = {}

const Article = (props: Props) => {
    const navigate = useNavigate()
    const contentStyle: React.CSSProperties = {
        height: '100%',
        color: '#fff',
        lineHeight: '160px',
        textAlign: 'center',
        background: '#364d79',
    };
<<<<<<< HEAD
    const { t, i18n } = useTranslation();
    const Mock = require("mockjs")
    const data = Mock.mock({
        "list|10": [
            {
                "title|+1": ['vue', 'react', 'javascript', '面试', '算法', 'html', 'css', 'node', 'mysql', 'nginx'],
                children: [
                    {
                        img: "@image(5x5,@color)"
                    }
                ],

            }
        ]
    })
<<<<<<< HEAD
=======
=======
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409

    return (
        <div className='article'>
            <div className="article_left">
                <Banner></Banner>
                <div className="Router_two">
                    <ul>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/index")
                        }}>
                            {t("All")}
<<<<<<< HEAD
=======
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/Android")
                        }}>
                            后端
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/web")
                        }}>
                            前端
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/android")
                        }}>
                            android
                        </li>
                        <li style={{ fontSize: '18px' }} onClick={() => {
                            navigate("/home/article/ai")
                        }}>
                            人工智能
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/kit")
                        }}>
                            开发工具
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/articlefe")
                        }}>
                            代码人生
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/read")
                        }}>
                            阅读
=======
                        <li>
                            <a href="" onClick={() => {
                                navigate("/home/article/index")
                            }}>All</a>
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/Android")
                        }}>
                            后端
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/web")
                        }}>
                            前端
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/android")
                        }}>
                            android
                        </li>
                        <li style={{ fontSize: '18px' }} onClick={() => {
                            navigate("/home/article/ai")
                        }}>
                            人工智能
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/kit")
                        }}>
                            开发工具
                        </li>
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/articlefe")
                        }}>
                            代码人生
                        </li>
<<<<<<< HEAD
                        <li style={{ fontSize: '17px' }} onClick={() => {
                            navigate("/home/article/read")
                        }}>
                            阅读
=======
                        <li>
                            <a href="" onClick={() => {
                                navigate("/home/article/read")
                            }}>阅读</a>
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
                        </li>
                    </ul>
                    <hr style={{ "color": "#ccc" }} />
                </div>

                <div className="router_list">
                    <Outlet></Outlet>
                </div>
            </div>
            <div className="article_right">
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
                <div className="article_right">
                    <div className="article_right_top">

                        <h4>{t("Recommended Readings")}</h4>
                        <p>vitepress 中文文档  . 2天前</p>
                        <p>react指北: 你真的会用hooks吗-中篇 . 2天前</p>
                        <p>牛客面经每日一总结（八）. 2天前</p>
                    </div>
                    <div className="article_right_buttom">
                        <h4>{t("Tags")}</h4>
                        <p>vue   [1]</p>
                        <p>react   [1]</p>
                        <p>javascript   [1]</p>
                        <p>面试   [1]</p>
                        <p>算法   [0]</p>
                        <p>html   [0]</p>
                        <p>css   [0]</p>
                        <p>node   [0]</p>
                        <p>mysql   [0]</p>
                        <p>nginx   [0]</p>
                        <p>java   [0]</p>
                        <p>python   [0]</p>
                        <p>rust   [0]</p>
                    </div>
                </div>

<<<<<<< HEAD
=======
=======
                RIGHT
>>>>>>> wanghengda
>>>>>>> 20de51ee1926e77b985667bbcfd9b29f2f72b409
            </div>

        </div>
    )
}

export default Article